import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import logoIcon from '@/assets/channel-management/detail/logo-icon.png'
import { Button, Dropdown, MenuItem, Menu, Tabs, TabPane } from 'ant-design-vue'
import { CaretDownOutlined } from '@ant-design/icons-vue'
import SchemeView from './components/Scheme'
import BillView from './components/Bill'
import OperateView from './components/operate'
import InsuranceView from './components/Insurance'
import DispatchView from './components/Dispatch'
import TabsRender from '@/render/TabsRender'
@Component
export class CustomerDetailView extends TabsRender {

    tabs = {
        '1': {
            title: '基础信息',
            component: <SchemeView />
        },
        '2': {
            title: '开通方案',
            component: <SchemeView />
        },
        '3': {
            title: '账单记录',
            component: <BillView />
        },
        '4': {
            title: '操作记录',
            component: <OperateView />
        },
        '5': {
            title: '在保记录',
            component: <InsuranceView />
        },
        '6': {
            title: '派遣单位',
            component: <DispatchView />
        }
    }

    renderHead() {
        return (
            <div class="px-24 py-20 rounded-default bg-white-default">
                {/* divide-y divide-blue-200 */}
                <div class="flex justify-between pb-20">
                    <div class="flex items-center">
                        <img src={ logoIcon } class="w-60 h-60 mr-16" alt="" />
                        <div>
                            <div class="flex items-center">
                                <div class="text-black-light-200 text-lg mr-16">润梦人力资源服务河北有限公司</div>
                                <div class="rounded-sm px-8 py-4 bg-[#00D679] bg-opacity-10 justify-center flex items-center">
                                    <div class="mr-4 w-6 h-6 rounded-full bg-[#00D679]"></div>
                                    <div class="text-[#00D679] text-base">已启用</div>
                                </div>
                            </div>
                            <div class="text-gray-light-100 text-base mt-4">GYSKH2410001-1</div>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <Dropdown
                            overlay={
                                <Menu>
                                    <MenuItem>编辑资料</MenuItem>
                                    <MenuItem>新增方案</MenuItem>
                                    <MenuItem>超龄设置</MenuItem>
                                    <MenuItem>拉黑</MenuItem>
                                </Menu>
                            }
                        >
                            <div class="px-12 py-4 border-solid border-gray-light-300 border rounded-sm flex items-center mr-12">
                                <div class="text-base">更多设置</div>
                                <CaretDownOutlined />
                            </div>
                        </Dropdown>
                        
                        <Button type="primary">返回</Button>
                    </div>
                </div>
                <div class="w-full border-1  border-gray-light-400"></div>
                <div class="mt-20 flex">
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">累计保费</div>
                        <div class="mt-12 font-semibold text-xl text-black-light-100 font-medium">￥8987.00</div>
                    </div>
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">理赔案件</div>
                        <div class="mt-12 font-semibold text-xl text-black-light-100 font-medium">1348</div>
                    </div>
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">理赔率</div>
                        <div class="mt-12 font-semibold text-xl text-green font-medium">12%</div>
                    </div>
                    <div class="w-1/4">
                        <div class="text-gray-light-600 text-base">建档时间</div>
                        <div class="mt-12 font-semibold text-xl text-black-light-100 font-medium">2024.10.12 14:00:00</div>
                    </div>
                </div>
            </div>
        )
    }

	

    render() { 
        return (
            <div class="flex flex-col h-full">
                <div class="flex-none">
                    { this.renderHead() }
                </div>
                <div class="flex-1">
                    { super.render() }
                </div>
            </div>
        )
    }
}

export default toNative<{}, {}>(CustomerDetailView)